/**
 * flex 布局工具类
 *
 * 基础类：
 * flex
 *
 * 方向类：
 * flex-[row|row-reverse|col|col-reverse]
 *
 * 换行类：
 * flex-[wrap|nowrap|wrap-reverse]
 *
 * flex数值类：
 * flex-[1-3]
 * flex-grow-[1-3]
 * flex-shrink-[1-3]
 * flex-basis-[25|50|75]
 * flex-[1-3]-[1-3]-[25|50|75]
 *
 * 间距类：
 * flex-gap-[0-10]
 *
 * 主轴对齐：
 * flex-x-[start|center|end|between|around|evenly]
 *
 * 交叉轴对齐：
 * flex-y-[start|center|end|between|around|evenly]
 *
 * 组合对齐：
 * flex-x-[start|center]-y-[start|center|end|between|around|evenly]
 */

@import '@/styles/abstracts/_variables.scss';

// 基础类
.flex {
  display: flex;
}

// 方向映射
$directions: (
  'row': row,
  'row-reverse': row-reverse,
  'col': column,
  'col-reverse': column-reverse,
);

// 换行映射
$wraps: (
  'wrap': wrap,
  'nowrap': nowrap,
  'wrap-reverse': wrap-reverse,
);

// 对齐方式映射
$alignments: (
  'start': flex-start,
  'center': center,
  'end': flex-end,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly,
);

// 生成方向类
@each $name, $value in $directions {
  .flex-#{$name} {
    display: flex;
    flex-direction: $value;
  }
}

// 生成换行类
@each $name, $value in $wraps {
  .flex-#{$name} {
    display: flex;
    flex-wrap: $value;
  }
}

// 生成伸缩比例类
@for $i from 1 through 3 {
  // flex: n
  .flex-#{$i} {
    display: flex;
    flex: $i $i auto;
  }

  // flex-grow
  .flex-grow-#{$i} {
    display: flex;
    flex-grow: $i;
  }

  // flex-shrink
  .flex-shrink-#{$i} {
    display: flex;
    flex-shrink: $i;
  }

  // flex-basis
  .flex-basis-#{$i * 25} {
    display: flex;
    flex-basis: percentage($i * 0.25);
  }

  // flex: n n n
  .flex-#{$i}-#{$i}-#{$i * 25} {
    display: flex;
    flex: $i $i percentage($i * 0.25);
  }
}

// 生成间距类
@each $size in $spacing-sizes {
  .flex-gap-#{$size} {
    display: flex;
    gap: #{$size}rpx;
  }
}

// 生成x轴对齐类
@each $name, $value in $alignments {
  .flex-x-#{$name} {
    display: flex;
    justify-content: $value;
  }
}

// 生成y轴对齐类
@each $name, $value in $alignments {
  .flex-y-#{$name} {
    display: flex;
    align-items: $value;
  }
}

// 生成组合对齐类
@each $xName, $xValue in $alignments {
  @each $yName, $yValue in $alignments {
    .flex-x-#{$xName}-y-#{$yName} {
      display: flex;
      align-items: $yValue;
      justify-content: $xValue;
    }
  }
}
